<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Sign in example • Pico CSS</title>
    <meta name="description" content="A minimalist layout for Login pages. Built with Pico CSS." />
    <link rel="shortcut icon" href="https://picocss.com/favicon.ico" />

    <!-- Pico.css -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css" />

    <!-- Custom styles for this example -->
    <link rel="stylesheet" href="custom.css" />
  </head>

  <body>
    <!-- Nav -->
    <nav class="container-fluid">
      <ul>
        <li>
          <a href="./" class="contrast" onclick="event.preventDefault()"><strong>Brand</strong></a>
        </li>
      </ul>
      <ul>
        <li>
          <details role="list" dir="rtl">
            <summary aria-haspopup="listbox" role="link" class="secondary">Theme</summary>
            <ul role="listbox">
              <li><a href="#" data-theme-switcher="auto">Auto</a></li>
              <li><a href="#" data-theme-switcher="light">Light</a></li>
              <li><a href="#" data-theme-switcher="dark">Dark</a></li>
            </ul>
          </details>
        </li>
      </ul>
    </nav>
    <!-- ./ Nav -->

    <!-- Main -->
    <main class="container">
      <article class="grid">
        <div>
          <hgroup>
            <h1>Sign in</h1>
            <p>A minimalist layout for Login pages</p>
          </hgroup>
          <form>
            <input
              type="text"
              name="login"
              placeholder="Login"
              aria-label="Login"
              autocomplete="username"
              required
            />
            <input
              type="password"
              name="password"
              placeholder="Password"
              aria-label="Password"
              autocomplete="current-password"
              required
            />
            <fieldset>
              <label for="remember">
                <input type="checkbox" role="switch" id="remember" name="remember" />
                Remember me
              </label>
            </fieldset>
            <button type="submit" class="contrast" onclick="event.preventDefault()">Login</button>
          </form>
        </div>
        <div></div>
      </article>
    </main>
    <!-- ./ Main -->

    <!-- Footer -->
    <footer class="container-fluid">
      <small
        >Built with <a href="https://picocss.com" class="secondary">Pico</a> •
        <a href="https://github.com/picocss/examples/tree/master/v1-sign-in/" class="secondary"
          >Source code</a
        ></small
      >
    </footer>
    <!-- ./ Footer -->

    <!-- Minimal theme switcher -->
    <script src="js/minimal-theme-switcher.js"></script>
  </body>
</html>
